<template>
    <div>
        <mainTitleText>
            <span slot="account" class="account">公告管理</span>
            <span slot="accountEnglish">ENGLISH TRANSLATION</span>
        </mainTitleText>
        <div class="buttons" v-if="!isShowDetail">
            <button class="layui-btn layui-btn-sm layui-btn-primary" :class="{active:isActive}" @click="all">全部公告</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" :class="{active:!isActive}" @click="add">
                <i class="layui-icon">&#xe654;</i>
                添加公告
            </button>
        </div>
        <div class="main" v-if="!isShowDetail">
            <announcement
                    :information="information"
                    :urls="urls"
                    v-if="isActive"
                    @detail="detail($event)"
                    @del="getItem(page,limit)"
                    @getId="getId($event)"></announcement>
            <addAnnouncement
                    :urls="urls"
                    v-if="!isActive"
                    :isActive="isActive"
                    :msg="msg"
                    v-on:cancel="cancel"></addAnnouncement>
        </div>
        <div class="main" v-if="isShowDetail">
            <announcementDetail :urls="urls" :id="id" @detail="detail($event)"></announcementDetail>
        </div>
    </div>
</template>

<script>
    import mainTitleText from '@/components/module/mainTitleText'
    import announcement from '@/components/module/announcement'
    import addAnnouncement from '@/components/module/addAnnouncement'
    import announcementDetail from '@/components/module/announcementDetail'
    import $ from 'jquery'
    export default {
        name: "announcementManagement",
        props:['urls','login'],
        components:{
            mainTitleText:mainTitleText,
            announcement:announcement,
            addAnnouncement:addAnnouncement,
            announcementDetail:announcementDetail
        },
        data(){
            return {
                isActive:true,
                isShow:false,
                isShowDetail:false,
                information:{
                    list:[],
                    hideEdit:true
                },
                msg:{},
                page:1,
                limit:3,
                id:0
            }
        },
        created(){
            this.getItem(this.page,this.limit);
        },
        computed:{

        },
        methods:{
            all(){
               this.isActive = true;
               // this.isShowDetail = true
                this.msg = {};//清空添加公告内容
            },
            add(){
                this.isActive = true;
                this.$nextTick(function(){
                    this.isActive = false;
                })
                this.msg = {};//清空点击编辑时所展示数据
                // this.msg = $.isEmptyObject(this.msg)?{}:this.msg
            },
            cancel(){//子组件点击取消触发该事件
              this.isActive = true;
            },
            detail(msg){
                this.id = msg;
                this.isShowDetail = msg?true:false;
            },
            getId(msg){
                this.isActive = false;
                this.msg = msg;
            },
            getItem(p,l){
                var _this = this;
                $.ajax({
                    url:_this.urls.announcementManagement.list,
                    type:'post',
                    data:{page:p,limit:l},
                    success:function(res){
                        // console.log(res)
                        _this.information.list = [];
                        _this.information.list.push(...res.data);
                        // console.log(_this.information.list)
                        layui.use('laypage',function(){//分页功能
                            var laypage = layui.laypage;
                            laypage.render({
                                elem: 'list'
                                ,count: res.count
                                ,limit:l
                                ,curr:p
                                ,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                                ,jump: function(obj,first){
                                    // console.log(obj)
                                    _this.page = obj.curr;
                                    _this.limit = obj.limit;
                                    if(!first) {
                                        _this.getItem(_this.page,_this.limit);
                                    }
                                }
                            });
                        })
                    },
                    error(msg){
                        console.log(msg)
                    }
                })
            }
        },
        watch:{
            isActive:function(a,b){
                if(a)
                this.getItem(this.page,this.limit);
            },
            isShowDetail:function(a,b){
                // console.log(a,b)
                if(b)
                this.getItem(this.page,this.limit);
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../static/css/style.less";
    .buttons{
        .layui-btn-primary:hover{
            border:1px solid #ccc;
        }
        .active{
            .blg(to right, #cd1f5c, #e11e27);
            color: @cf;
            border: 1px solid transparent;
        }
        .active:hover{
            border: 1px solid transparent;
        }
    }
    .main{
        background-color: @cf;
        padding:31px;
        .bs(0 0 5px #ccc);
        margin-top: 20px;

    }
</style>